<template>
<!--todo 用户手动输入标签-->
<!--    <van-cell-group inset>-->
<!--        <van-field v-model="value" label="可输入标签" placeholder="请输入标签" />-->
<!--    </van-cell-group>-->
<!--    标签修改-->
    <van-cell-group>
        <van-cell style="font-weight:bold" title="已有标签" value="内容" />
        <van-tag plain type="danger" v-for="tag in dataTags" style="margin-right:10px ">
            {{tag}}
        </van-tag>
    </van-cell-group>


    <!--展示已选标签-->
    <van-divider content-position="left">已选标签</van-divider>
<!--    <div v-if="activeIds.length === 0">请选择标签</div>-->

    <!--使用van-row列和van-col使得标签间存在16像素的间距并且自动换行-->
    <van-row gutter="16" style="padding: 0 16px">
        <!--v-for="tag in activeId"：将已选的标签遍历输出出来-->
        <van-col v-for="tag in activeIds">
            <van-tag   closeable size="small" type="primary" @close="close(tag)">
                {{tag}}
            </van-tag>
        </van-col>
    </van-row>


    <van-divider content-position="left">选择标签</van-divider>

    <!--展示所有标签-->
    <!--main-active-index：左侧选中项的索引-->
    <!--active-id：右侧选中项的id-->
    <van-tree-select
            v-model:active-id="activeIds"
            v-model:main-active-index="activeIndex"
            :items="tagList"

    />
    <div style="margin-top: 100px;">
        <van-button round block type="primary"  @click="doAddTags">
            添加
        </van-button>
    </div>
</template>

<script setup >
    import {showFailToast, Toast} from "vant";
    import { ref ,onMounted} from 'vue';
    import {useRouter} from 'vue-router'
    import myAxois from "../plugin/MyAxios";
    import {getCurrentUser} from "../service/user";

    const router = useRouter();
    //标签列表
    const activeIds = ref([]);//选中标签的id
    const activeIndex = ref(0);

    const onriginTagList = [
        {
            text: '学历',
            children: [
                { text: '求职', id: '求职' },
                { text: '在职', id: '在职' },
                { text: '待业', id: '待业' },
                { text: '高中', id: '高中' },
                { text: '专科', id: '专科' },
                { text: '大一', id: '大一' },
                { text: '大二', id: '大二' },
                { text: '大三', id: '大三' },
                { text: '大四', id: '大四' },
                { text: '研究生', id: '研究生' },
                { text: '博士', id: '博士' },

            ],
        },
        {
            text: '计算机语言',
            children: [
                { text: 'java', id: 'java' },
                { text: 'c', id: 'c' },
                { text: 'c++', id: 'c++' },
                { text: 'c#', id: 'c#' },
                { text: 'go', id: 'go' },
                { text: 'python', id: 'python' },
            ],
        },
        {
            text: '兴趣爱好',
            children: [
                { text: '编程', id: '编程' },
                { text: '羽毛球', id: '羽毛球' },
                { text: '篮球', id: '篮球' },
                { text: '乒乓球', id: '乒乓球' },
                { text: '游泳', id: '游泳' },
            ],
        },
        {
            text: '求职方向',
            children: [
                { text: 'java后端开发', id: 'java后端开发' },
                { text: '前端开发', id: '前端开发' },
                { text: '嵌入式', id: '嵌入式' },
                { text: '人工智能', id: '人工智能' },
                { text: '大数据', id: '大数据' },
                { text: '算法', id: '算法' },
                { text: '考研', id: '考研' },
            ],
        },
        {
            text: '技术栈',
            children: [
                { text: 'Spring全家桶', id: 'Spring全家桶' },
                { text: 'Redis', id: 'Redis' },
                { text: 'RabbitMQ', id: 'RabbitMQ' },
                { text: 'MySQL', id: 'MySQL' },
                { text: 'Vue', id: 'Vue' },
                { text: 'React', id: 'React' },
                { text: '微服务', id: '微服务' },
            ],
        },
    ];

    //克隆一份TagList数据【用作过滤搜索】，并将其编程响应式数据
    let tagList = ref(onriginTagList);


    //取消按钮
    const onCancel = () => {
        searchText.value = '';
        //不改变原数据【下面这条代码运用于上面搜索按钮】
        tagList.value = onriginTagList;
    };

    const show = ref(true);

    //关闭标签功能【一个难点】
    const close = (tag) => {
        //activeIds是ref包装的对象，需要用value去到本身的值，是一个数组
        //tag是所要删除的标签
        activeIds.value = activeIds.value.filter(item => {
            //filter是下面ruturn为true就保留
            return item !== tag;
        })
    }

    // const data = JSON.stringify(activeIds.value);
    const doAddTags = async () =>{
        const res = await myAxois.post("/user/add/tags",activeIds.value);
        if(res.data.code === 0){
            showFailToast("添加成功");
            window.location.reload()
        }else{
            showFailToast("添加失败")
        }
    }
    const currentUser = ref('');
    const dataTags = ref('');
    //获取当前登录用户信息
    onMounted(async () =>{
        const res = await getCurrentUser();
        if(res.data.code === 0){
            currentUser.value = res.data.data;
        }else{
            showFailToast("出错了")
        }
        dataTags.value = JSON.parse(currentUser.value.tags);

    })

</script>

<style scoped>

</style>